<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs @change="(val)=>{$router.push({name:val})}" activeKey="MchOrder">
        <a-tab-pane key="MchList" tab="商户列表"> </a-tab-pane>
        <a-tab-pane key="MchApply" tab="入驻审核"> </a-tab-pane>
        <a-tab-pane key="MchCommotCat" tab="所售类目"> </a-tab-pane>
        <a-tab-pane key="MchGoods" tab="入驻商品"> </a-tab-pane>
        <a-tab-pane key="MchOrder" tab="入驻订单"> </a-tab-pane>
        <a-tab-pane key="MchCashList" tab="提现申请"> </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input-search v-model="queryParam.keyword" style="width: 100%" placeholder="请输入关键词" />
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="订单类型">
                <a-select placeholder="请选择" v-model="queryParam.orderWaimai" default-value="1">
                  <a-select-option value="1">全部</a-select-option>
                  <a-select-option value="2">普通订单</a-select-option>
                  <a-select-option value="4">外卖订单</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="订单时间">
                <a-config-provider :locale="locale">
                  <a-range-picker
                    format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%"
                    @change="onChange"
                    @calendarChange="calendarChange"
                    :ranges="ranges"
                  />
                </a-config-provider>
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="来源平台">
                <a-select v-model="queryParam.platform" placeholder="请选择" default-value="">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="0">微信小程序</a-select-option>
                  <a-select-option value="2">微信公众号</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons" style="margin-bottom: 0">
                <a-button
                  style="margin-right: 8px"
                  @click="() => (this.queryParam = { status: this.queryParam.status })"
                  >重置</a-button
                >
                <a-button type="primary" @click="getOrderListData(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card style="margin-top: 10px" :bordered="false" class="card_style_re">
      <div class="table-operator">
        <NoBorderRadio @onChange="onOptionChange" :options="options"></NoBorderRadio>
        <!-- <a-button type="primary" icon="plus" style="float: right">新建</a-button> -->
      </div>
      <a-divider />

      <a-spin :spinning="spinning">
        <ListTable ref="listTable" :list_th="list_th" :pagaData="pagaData" @triggerAction="listActions"> </ListTable>
      </a-spin>
      <div style="float: right">
        <Pagination v-model="pageParams.pageNo" :total="totalCount" show-less-items />
      </div>
    </a-card>
    <SendModal
      :visible.sync="isShowSendModal"
      :expressList="expressList"
      :orderId="orderId"
      @onAfterClose="onAfterClose"
    ></SendModal>
    <AddressModal
      ref="addressModal"
      :visible.sync="isShowAddressModal"
      :orderId="orderId"
      @onAfterClose="onAfterClose"
    ></AddressModal>
    <OrderPrintModal :visible.sync="isShowPrintModal" :order="orderInfo"></OrderPrintModal>
  </page-header-wrapper>
</template>

<script>
import SendModal from '@/views/order/components/SendModal'
import AddressModal from '@/views/order/components/AddressModal'
import OrderPrintModal from '@/views/order/components/OrderPrint'

import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { Pagination } from 'ant-design-vue'
import ListTable from '@/views/order/components/ListTable'
import { orderCancel, orderPrint, orderTable, orderEdit } from '@/api/order'
import { getOrderList, setComments } from '@/api/mch/order'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

export default {
  name: 'OrderList',
  components: {
    ListTable,
    Pagination,
    SendModal,
    AddressModal,
    OrderPrintModal,
    NoBorderRadio,
  },
  data() {
    return {
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '未付款',
          value: 0,
        },
        {
          title: '待发货',
          value: 1,
        },
        {
          title: '待收货',
          value: 2,
        },
        {
          title: '已完成',
          value: 3,
        },
        {
          title: '待处理',
          value: 6,
        },
        {
          title: '已取消',
          value: 5,
        },
        {
          title: '回收站',
          value: 7,
        },
      ],
      spinning: false,
      expressList: [],
      list_th: [
        { type: 'list', title: '产品名称', span: 5 },
        { type: 'list', title: '单价/数量', span: 3 },
        { type: 'list', title: '运费', span: 5 },
        { type: 'list', title: '订单金额', span: 3 },
        { type: 'list', title: '订单状态', span: 2 },
        { type: 'list', title: '订单来源', span: 2 },
        {
          type: 'list',
          title: '操作',
          span: 3,
          actions: ['编辑', '发货', '取消', '核销', '确认收货', '订单打印', '小票打印', '添加备注', '移入回收站'],
        },
      ],
      activeKey: '1',
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      queryParam: {
        status: -1,
      },
      tabKey: '',
      selectDate: {},
      totalCount: 0,
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      pagaData: [],
      remark: '',
      isShowSendModal: false,
      isShowAddressModal: false,
      orderId: '',
      isShowPrintModal: false,
      orderInfo: null,
    }
  },
  watch: {
    currentPage() {
      this.getOrderListData()
    },
  },
  created() {
    this.getOrderListData()
  },
  activated() {},
  computed: {
    currentPage() {
      return this.pageParams.pageNo || 1
    },
  },
  filters: {},
  methods: {
    onOptionChange(val) {
      if (val == '7') {
        this.queryParam.is_recycle = 1
        this.queryParam.status = ''
        this.getOrderListData()
      } else {
        this.queryParam.is_recycle = 0
        this.queryParam.status = val
        this.getOrderListData()
      }
    },
    listActions(name, row, reason) {
      switch (name) {
        case 'order_edit': //编辑
          this.$router.push({ name: 'OrderDetails', query: { order_id: row.id } })
          break
        case 'order_send': //发货
          this.orderId = row.id
          this.isShowSendModal = true
          break
        case 'order_cancel': //取消
          this.cancel(row, 1, 1, reason)
          break
        case 'order_cancel_0': //取消
          this.cancel(row, 0, 0, reason)
          break
        case 'order_cancel_1': //取消
          this.cancel(row, 1, 0, reason)
          break
        case 'order_cancel_verification': //核销
          console.log(name)
          break
        case 'order_confirm': //确认收货
          console.log(name)
          break
        case 'order_print': //打印订单
          console.log(name)
          this.orderInfo = row
          this.isShowPrintModal = true
          // this.orderTable(row)
          break
        case 'order_receipts_print': //打印小票
          console.log(name)
          this.orderPrint(row)
          break
        case 'order_remark': //添加备注
          this.orderRemark(row)
          break
        case 'order_recycle': //移入回收站
          console.log(name)
          this.orderRecycle(row)
          break
        case 'order_address': //修改地址
          this.orderId = row.id
          this.isShowAddressModal = true
          break
        case 'apply_0': //拒绝取消
          console.log(name)
          break
        case 'apply_1': //同意取消
          console.log(name)
          break
        default:
          break
      }
    },
    cancel(record, status, type, reason) {
      var params = {
        type: type,
        status: status,
        remark: reason,
        id: record.id,
      }
      const hide = this.$message.loading('取消中...', 0)
      orderCancel(params)
        .then((res) => {
          console.log(res)
          hide()
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('取消订单成功')
            this.getOrderListData()
          }
          this.$nextTick(() => {
            this.$refs['addressModal'].reason = ''
          })
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    orderRemark(row) {
      const h = this.$createElement
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '添加备注信息',
        maskClosable: true,
        content: h('div', {}, [
          h('a-textarea', {
            props: {
              placeholder: '填写备注',
              autoSize: { minRows: 4, maxRows: 6 },
            },
            on: {
              change: (val) => {
                this.remark = val.target.value
              },
            },
          }),
        ]),
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('取消中...', 0)
          setComments({
            order_id: row.id,
            seller_comments: this.remark,
          }).then((res) => {
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
            }
          })
        },
      })
    },
    orderRecycle(row) {
      this.$confirm({
        icon: '<>',
        closable: true,
        width: 540,
        title: '是否移入回收站',
        maskClosable: true,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const hide = this.$message.loading('取消中...', 0)
          orderEdit({
            order_id: row.id,
            is_recycle: 1,
          }).then((res) => {
            hide()
            if (res.code !== 0) {
              this.$error({
                content: res.msg,
              })
            } else {
              this.$message.success(res.msg)
            }
          })
        },
      })
    },
    getOrderListData(flag) {
      this.spinning = true
      if (flag) {
        this.pageParams.pageNo = 1
      }
      let params = {
        ...this.queryParam,
        ...this.pageParams,
      }
      getOrderList(params).then((res) => {
        if (res.code === 0) {
          this.expressList = res.data.express_list
          this.pagaData = res.data.data
          this.totalCount = res.data.totalCount
        } else {
          that.$message.error(res.msg)
        }
        this.spinning = false
      })
    },
    resetSearchForm() {
      this.queryParam = {
        dateStart: moment(new Date()),
        dateEnd: moment(new Date()),
      }
    },
    moment,
    calendarChange(date, dateString) {
      this.selectDate = date[0]
    },
    onChange(date, dateString) {
      this.queryParam.dateStart = dateString[0]
      this.queryParam.dateEnd = dateString[1]
    },
    onAfterClose() {
      this.getOrderListData()
    },
    orderPrint(order) {
      const hide = this.$message.loading('提交中...', 0)
      orderPrint({
        order_id: order.id,
      }).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success(res.msg)
        }
      })
    },
    orderTable(order) {
      const hide = this.$message.loading('提交中...', 0)
      orderTable({
        order_id: order.id,
      }).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.getOrderListData()
          this.$message.success(res.msg)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-card-head {
  border-bottom: none;
}
.top_card {
  /deep/.ant-card-body {
    padding-bottom: 0;
  }
  /deep/.ant-tabs-bar {
    margin-bottom: 0;
    border-bottom: 1px solid #fff;
  }
}
</style>
